<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import axios from 'axios';
import { ArrowDown } from '@element-plus/icons-vue'
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const methods = {
	ticker:1,

	onSubmit: async () => {
		ElNotification({
			title: '提示',
			message: h('i', { style: 'color: teal' }, '程序已经开始运行,该功能的数据扫描会耗大量时间,请耐心等待10分钟左右'),
			duration: 0,
		})
		axios.post('/myapi/api/ma', {
				"ip": state.scan,
			});
	},

	Submit114: async () => {
		axios.post('/myapi/api/map', {
				"ip": '114.114.114.114',
			});
	},

	updateprocess: async () => {
		const { data } = await axios.get('/myapi/api/maptct', {
			});
		state.tct = data
	},

	Submit8: async () => {
		axios.post('/myapi/api/map', {
				"ip": '8.8.8.8',
			});
	},

	Submit61: async () => {
		axios.post('/myapi/api/map', {
				"ip": '61.132.163.68',
			});
	},

	Submit223: async () => {
		axios.post('/myapi/api/map', {
				"ip": '223.5.5.5',
			});
	},

	Submit9: async (ip:string) => {
		axios.post('/myapi/api/map', {
				"ip": ip,
			});
	}
};

interface UserForm {
	ip: string;
	isp:string;
	log:boolean;
}

import { ref } from 'vue'

const initials = ['223.6.6.6', '180.76.76.76', '77.88.8.8', 'a', '9.9.9.9', 'g', 'h', 'i', 'j']

const value = ref('')

const options = [
  {
    value: '223.6.6.6',
    label: '223.6.6.6',
  },
  {
    value: '180.76.76.76',
    label: '180.76.76.76',
  },
  {
    value: '77.88.8.8',
    label: '77.88.8.8',
  },
  {
    value: '9.9.9.9',
    label: '9.9.9.9',
  },
  {
	value: '208.67.222.222',
	label: '208.67.222.222',
  },
  {
	value: '165.87.13.129',
	label: '165.87.13.129',
  },
]

const state = reactive({
	logForm: {
		ip: '180.76.76.76',
		isp:'Baidu',
		log: true,
	} as UserForm,
    buttonText: '探测服务范围',
	result: '',
	tct: '',
	scan: '',
	isButtonDisabled: false,
	filePath: 'src/views/DetailDetect/Leafletheat服务范围地图页面及数据/test/114.114.114.114.html'
});
</script>

<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Detection' }" class="bread">属性感知</el-breadcrumb-item>
			<el-breadcrumb-item class="bread">DNS系统服务范围感知功能测试</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div class="display-flex j-c-c a-i-c height100">
		<div class="login-form">
			<h1 class="title">IP输入</h1>
			<el-form>
				<el-form-item prop="email" label="探测的的IP地址">
					<el-select v-model="state.scan" placeholder="请选择ip" size="large" style="width: 240px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item class="button-container">
					<el-button class="Mybutton" type="primary" @click="methods.onSubmit"
						:disabled="state.isButtonDisabled">
						{{ state.buttonText }}
					</el-button>
				</el-form-item>

				<div class="flex flex-wrap items-center">
					<el-dropdown>
						<el-button type="primary">
							已扫描完成的数据<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="methods.Submit114">114.114.114.114，中国电信</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit8">8.8.8.8,Google public DNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit61">61.132.163.68,合肥电信</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit223">223.5.5.5,阿里云</el-dropdown-item>
								<el-dropdown-item
									@click="methods.Submit9('8.8.8.9')">8.8.8.9，北京某DNS解析器</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('1.2.4.8')">1.2.4.8，CNNIC
									sDNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('4.2.2.1')">4.2.2.1，Level3
									DNS(美国)</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('114.114.114.114')">114.114.114.114，南京GreatBit
									114 DNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('9.9.9.9')">9.9.9.9，Quad9
									DNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('74.82.42.42')">74.82.42.42，Hurricane Electric
									DNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('216.146.35.35')">216.146.35.35，Dyn
									DNS</el-dropdown-item>
								<el-dropdown-item @click="methods.Submit9('80.80.80.80')">80.80.80.80，Freenom World(荷兰)
									DNS</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>

				<el-form-item class="button-container">
					<el-button class="Mybutton" type="primary" @click="methods.updateprocess"
						:disabled="state.isButtonDisabled">
						更新进度信息
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

	<div class="display-flex j-c-c a-i-c height100">

		<el-form class="Output-form">
			<h1 class="title">数据扫描进度信息</h1>
			<el-form-item>
				<el-input placeholder="" clearable :rows="15" :autosize="{ minRows: 15, maxRows: 15 }" readonly="true"
					class="OutputBox" type="textarea" v-model="state.tct" />
			</el-form-item>
		</el-form>
	</div>

</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 270px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 2px;
	margin-top: 20px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.Output-form {
	width: 600px;
	height: 470px;
    
	margin: 0 auto;
	margin-top: 40px;
    padding: 20px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.Output {
	height: 260px;
	position: relative;
	margin: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	width: 160px;
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.bread {
    font-size: 34px;
}
</style>